<!-- 💥 这里是一次性加载 LayoutComponents -->
<template>
	<component :is="LayoutComponents[themeConfig.layout]" />
	<ThemeDrawer />
</template>

<script setup lang="ts" name="layout">
import { computed, onMounted, onUnmounted } from 'vue';
import { getmark } from '@/utils/util';
import { GlobalStore } from '@/stores';
import ThemeDrawer from './components/ThemeDrawer/index.vue';
import LayoutVertical from './LayoutVertical/index.vue';
import LayoutClassic from './LayoutClassic/index.vue';
import LayoutTransverse from './LayoutTransverse/index.vue';
import LayoutColumns from './LayoutColumns/index.vue';
const userInfo = computed(() => globalStore.userInfo);
const globalStore = GlobalStore();
const themeConfig = computed(() => globalStore.themeConfig);
// 添加水印
const { watermark } = getmark();
onMounted(() => {
	// 设置是否要显示水印
	if (themeConfig.value.isWatermark) {
		watermark(userInfo.value.name); //水印名
	}
});
onUnmounted(() => {
	watermark('');
});
const LayoutComponents: { [key: string]: any } = {
	vertical: LayoutVertical,
	classic: LayoutClassic,
	transverse: LayoutTransverse,
	columns: LayoutColumns
};
</script>

<style scoped lang="scss">
.layout {
	// min-width: 740px;
}
</style>
